<template>
  <div class="types">
    <p style="text-align: left; text-indent: 0.2rem; font-size: 0.28rem">
      <slot></slot>
    </p>
    <ul>
      <li v-for="(item, i) in list" :key="i">
        <div class="room">
          <p>
            <img
              style="width: 0.3rem"
              src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/hotnum_6b05e5d.png"
              alt=""
            />
            <span>{{ item.hn }}</span>
          </p>
          <img :src="item.roomSrc" alt="" />
          <p>
            {{ item.nickname }}
          </p>
        </div>
        <p class="roomtitle">
          {{ item.roomName }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    methods: {},
  },
};
</script>
<style lang="scss" scoped>
.types {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 2.5rem;
      .room {
        width: 95%;
        margin: 0 auto;
        border-radius: 0.2rem;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
        }
        p:nth-of-type(1) {
          position: absolute;
          right: 0.2rem;
          font-size: 0.28rem;
          top: 0.01rem;
          color: #fff;
          background-image: linear-gradient(to right, #ccc, #000);
          opacity: 0.6;
          text-align: right;
          width: 50%;
          right: 0rem;
          line-height: 0.4rem;
          display: flex;
          img {
            margin-left: 0.3rem;
            height: 50%;
          }
          span {
            margin-right: 0rem;
          }
        }
        p:nth-of-type(2) {
          position: absolute;
          bottom: 0rem;
          font-size: 0.28rem;
          color: #fff;
          text-indent: 0.1rem;
          width: 100%;
          background-image: linear-gradient(#ccc, #000);
          opacity: 0.6;
          line-height: 0.4rem;
          text-align: left;
        }
      }
      .roomtitle {
        font-size: 0.28rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        text-align: left;
        text-indent: 0.1rem;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>